Ext.namespace("ca.magex.layout");

ca.magex.gps.TrackGridFormPanel = function(config) {
	
	var t = this;
	Ext.apply(this, config);

	var saveAction = new Ext.Action({
		text: 'Save',
		handler: function() {
		
		}
	});
	
	var createAction = new Ext.Action({
		text: 'Create Segment',
		handler: function() {
		
		}
	});
	
    var editor = new Ext.form.FormPanel({
		region: 'south',
		height: 200,
		split: true,
    	animCollapse: true,
    	collapsible: true,
    	labelAlign: 'right',
    	labelWidth: 100,
    	bodyStyle: 'padding: 10px;',
    	autoScroll: true,
    	tbar: [saveAction, createAction],
    	items: [{
    		xtype: 'fieldset',
    		title: 'Track Information',
    		autoHeight: true,
    		anchor: '0',
    		items: [{
	    		fieldLabel: 'Track Id',
	    		xtype: 'textfield',
	    		name: 'garmin_lap_id',
	    		width: 60,
	    		readOnly: true,
	    		disabled: true,
	    		allowBlank: false
    		},{
	    		fieldLabel: 'Title',
	    		xtype: 'textfield',
	    		name: 'title',
	    		anchor: '-5',
	    		allowBlank: false
    		},{
	    		fieldLabel: 'Tags',
	    		xtype: 'textfield',
	    		name: 'tags',
	    		anchor: '-5',
	    		allowBlank: false
    		},{
	    		fieldLabel: 'Visibility',
	    		xtype: 'textfield',
	    		name: 'visibility',
	    		anchor: '-5',
	    		allowBlank: false
    		}]
    	}]
    });
	
	var ds = new ca.magex.data.TaggerStore({
		type: 'garmin_lap',
		fields: [
			{name: 'garmin_lap_id', mapping: 'meta[@name="garmin.lap_id"]/@value', type: 'int'},
			{name: 'title', mapping: '@title'},
			{name: 'tags', mapping: '@tags'},
			{name: 'visibility', mapping: '@visibility'},
			{name: 'pointquery', mapping: 'meta[@name="garmin.pointquery"]/@value'}
		]
	});
	
	var sm = new Ext.grid.RowSelectionModel({
		singleSelect: true,
	});
	
    var grid = new Ext.grid.GridPanel({
    	region: 'center',
		ds: ds,
		sm: sm,
		columns: [
			{header: 'Lap Id', dataIndex: 'garmin_lap_id', sortable: true, width: 40},
		    {header: 'Title', dataIndex: 'title', sortable: true},
			{header: 'Tags', dataIndex: 'tags', sortable: true},
			{header: 'Point Query', dataIndex: 'pointquery', sortable: true, hidden: true},
			{header: 'Visibility', dataIndex: 'visibility', sortable: true, width: 60}
		],
		viewConfig: {
			forceFit: true
		}
    });

	sm.on('rowselect', function(sm, index, rec) {
		Ext.getCmp('map-panel').load(rec.get("pointquery"));
		editor.getForm().loadRecord(rec);
	});
	
    ca.magex.gps.TrackGridFormPanel.superclass.constructor.call(this, {
    	layout: 'border',
    	items: [editor, grid]
    });

};

Ext.extend(ca.magex.gps.TrackGridFormPanel, Ext.Panel);
